@extends('layouts.mobile_main')

@section('title', '客服中心')

@section('resources')
    @parent
    <link rel="stylesheet" href="{{ env('CSS_DOMAIN') }}/css/public.css?v={{env('CSS_VERSION')}}">
    <link rel="stylesheet" href="{{ env('CSS_DOMAIN') }}/css/check.css?v={{env('CSS_VERSION')}}">
    <script src="{{ env('JS_DOMAIN') }}/js/adaptation.js?v={{env('JS_VERSION')}}"></script>
    <style>
		.question_ctn p{display: none;}
		.pay_sure{background-color: #9955c6;}
		#question_mobile_weixin{text-align: center;background: #eee url("{{env('IMAGE_DOMAIN')}}images/shop_call.png?v={{env('IMAGE_VERSION')}}") 3rem 0.55rem no-repeat;background-size: 0.8rem;margin-top: 1.32rem;display: inline-block;height: 1.8rem;line-height: 1.8rem;width: 100%;font-size: 0.44rem;}
		#question_mobile_mobile{text-align: center;background: #eee url("{{env('IMAGE_DOMAIN')}}images/shop_call.png?v={{env('IMAGE_VERSION')}}") 3rem 0.55rem no-repeat;background-size: 0.8rem;display: inline-block;height: 1.6rem;line-height: 1.8rem;width: 100%;font-size: 0.44rem;}
		.question_title{padding-left: 0.6rem;height: 1.19rem;line-height: 1.19rem;font-size: 0.44rem;background-color: #fff;}
		.question_content{overflow: hidden;}
		.question_content ul{float: left;width: 7.86rem;background-color: #fff;}
		.question_content ul li{float: left;width: 7.86rem;background-color: #fff;border-top: 1px solid #eee;padding: 0.2rem 0.6rem 0.2rem 1rem;font-size: 0.36rem;}
		.question_content ul li p{margin: 0.2rem 0;width: 6.26rem;}
		.question_content ul li .question_a a{color: #808080;}
		.question_content ul li .question_a{color: #808080;}
		.question_left{width: 2.9rem;text-align: center;font-size: 0.44rem;border-right: 1px solid #eee;background-color: #fff;float: left;border-top: 1px solid #eee;}
		.question_App_left img{transform: rotate(0deg);transition:transform 0.5s ease-in-out 0s;}
		.question_recharge_left img{transform: rotate(0deg);transition:transform 0.5s ease-in-out 0s;}
		.question_App_left .transform{transform: rotate(180deg);}
		.question_recharge_left .transform{transform: rotate(180deg);}
	</style>
@endsection

@section('content')
<div class="paysu_outer">
	<header class="pay_sure oh" style="position: fixed;top: 0;left: 0;">
		<a class="fl" href="javascript:history.go(-1);">
		    <img class="fl" src="{{env('IMAGE_DOMAIN')}}images/back_w.png?v={{env('IMAGE_VERSION')}}" alt="">
		</a>
		<span class="fl co_white fz_48">客服中心</span>
	</header>
	<a id="question_mobile_weixin" href="tel:4006989820">拨打客服热线</a>
	<input id="question_mobile_mobile" hidden class="calltel" type="button" name="" value="拨打客服热线" onclick="callTel('4006989820')">
	<p class="question_title">常见问题</p>
	<div class="question_content">
		<div class="question_left question_App_left">
			<p style="margin-top: 2.5rem;">App使用</p>
			<img style="width: 0.48rem;" src="{{env('IMAGE_DOMAIN')}}images/down_g.png?v={{env('IMAGE_VERSION')}}" alt="">
		</div>
		<ul class="question_App">
			<li>
				<p class="question_q">Q: 如何使用翻贝网买单？</p>
				<p class="question_a"><a href="/mobile/mycenter/Appuse">A: 点击查看使用流程></a></p>
			</li>
			<li>
				<p class="question_q">Q: 怎么注册和登录翻贝网账号？</p>
				<p class="question_a"><a href="/mobile/mycenter/Applogin">A: 点击查看使用流程></a></p>
			</li>
			<li>
				<p class="question_q">Q: 怎么开通订阅提醒？</p>
				<p class="question_a"><a href="/mobile/mycenter/opensubscribe">A: 点击查看使用流程></a></p>
			</li>
			<li class="change_mobile" hidden>
				<p class="question_q">Q: 如何更换手机号码？</p>
				<p class="question_a"><a href="/mobile/mycenter/changemobile">A: 点击查看使用流程></a></p>
			<li class="password" hidden>
				<p class="question_q">Q: 如何设置支付密码？</p>
				<p class="question_a"><a href="/mobile/mycenter/howpaypassword">A: 点击查看使用流程></a></p>
			</li>
		</ul>
	</div>
	<div class="question_content">
		<div class="question_left question_recharge_left">
			<p style="margin-top: 4.5rem;">充值与买单</p>
			<img style="width: 0.48rem;" src="{{env('IMAGE_DOMAIN')}}images/down_g.png?v={{env('IMAGE_VERSION')}}" alt="">
		</div>
		<ul class="question_recharge">
			<li>
				<p class="question_q">Q: 充值与服务费说明？</p>
				<p class="question_a">A: 翻贝网用户可以选择10元起充，翻倍到账。充值时会收取6%的服务费，这笔费用不会记录到余额中。预充值余额会保留在用户账户名下用于翻贝网内下次消费。</p>
			</li>
			<li>
				<p class="question_q">Q: 余额里的钱可以提现吗？</p>
				<p class="question_a">A: 充值余额只可用于翻贝网内消费，不可退还。</p>
			</li>
			<li>
				<p class="question_q">Q: 翻倍日商家不允许买单，怎么办？</p>
				<p class="question_a">A: 请进入商家页面，点击【投诉商家】进行投诉即可。</p>
			</li>
			<li class="double_time" hidden>
				<p class="question_q">Q: 每天有翻倍次数限制吗？</p>
				<p class="question_a">A: 部分商家有翻倍次数限制，具体您可点击商家详情页面查看。</p>
			<li class="money_none" hidden>
				<p class="question_q">Q: 充值未到账怎么办？</p>
				<p class="question_a">A: 若您充值未到账，可以拨打我们的客服热线400-6989-820进行咨询。</p>
			</li>
		</ul>
	</div>
	<div class="question_content">
		<div class="question_left question_other_left">
			<p style="margin-top: 2.5rem;">其他问题</p>
		</div>
		<ul class="question_other">
			<li>
				<p class="question_q">Q: 商家入驻申请</p>
				<p class="question_a">A: 您好，如您要合作，请点击APP中【我的】-【商家入驻】入口，按照提示操作即可。</p>
			</li>
			<li style="border-bottom: 1px solid #eee;">
				<p class="question_q">Q: 城市代理申请</p>
				<p class="question_a">A: 您好，如您要合作，您可以拨打我们的客服热线：400-6989-820。</p>
			</li>
		</ul>
	</div>
</div>
@endsection

@section('scriptResources')
    @parent
<script>
	var App_height = $(".question_App").height() - 1;
	var recharge_height = $(".question_recharge").height() - 1;
	var other_height = $(".question_other").height() - 1;
	window.onresize=function(){
		pagesp();
	};
	//打电话
	function callTel(telNum){
		MobileJS.callTel(telNum);
		// console.log()
	};
	$(".question_App_left").css({"height": App_height});
	$(".question_recharge_left").css({"height": recharge_height});
	$(".question_other_left").css({"height": other_height});
    $(function(){
		var paysu_outer_h=$(window).height();
		var pay_sure=$(".pay_sure").height();
    	if(navigator.userAgent=='FBWAndroidApp'||navigator.userAgent.indexOf('FBWiOSApp')>0){
            $('header').hide();
            $("#question_mobile_mobile").show();
            $("#question_mobile_weixin").hide();
        }else{
            $('header').show();
            $("#question_mobile_mobile").hide();
            $("#question_mobile_weixin").show();
			$(".paysu_outer").css({"min-height":paysu_outer_h-pay_sure-1});
			$(".question_ctn").css({"margin-top":pay_sure+1});
        }
        var lis;
        $(".question_ctn li").click(function(){
        	if($(this).index() == lis){
        		$(this).children("p").hide();
        		lis = 'none';
        	}else{
        		$(this).children("p").show();
	        	$(this).siblings().children("p").hide();
        		lis = $(this).index();
        	}
        })
		var recharge = "off";
		var App = "off";
		$(".question_App_left").click(function () {
			if(App == "off"){
                App = "on";
                recharge = "off";
                $(".change_mobile").show();
                $(".password").show();
                $(".double_time").hide();
                $(".money_none").hide();
                App_height = $(".question_App").height() - 1;
                $(".question_App_left").css({"height": App_height});
                recharge_height = $(".question_recharge").height() - 1;
                $(".question_recharge_left").css({"height": recharge_height});
                $(".question_App_left img").addClass("transform");
                $(".question_recharge_left img").removeClass("transform");
			}else{
                App = "off";
                recharge = "off";
                $(".change_mobile").hide();
                $(".password").hide();
                $(".double_time").hide();
                $(".money_none").hide();
                App_height = $(".question_App").height() - 1;
                $(".question_App_left").css({"height": App_height});
                recharge_height = $(".question_recharge").height() - 1;
                $(".question_recharge_left").css({"height": recharge_height});
                $(".question_App_left img").removeClass("transform");
                $(".question_recharge_left img").removeClass("transform");
			}
        })
		$(".question_recharge_left").click(function () {
			if(recharge == "off"){
                recharge = "on";
                App = "off";
                $(".change_mobile").hide();
                $(".password").hide();
                $(".double_time").show();
                $(".money_none").show();
                recharge_height = $(".question_recharge").height() - 1;
                $(".question_recharge_left").css({"height": recharge_height});
                App_height = $(".question_App").height() - 1;
                $(".question_App_left").css({"height": App_height});
                $(".question_recharge_left img").addClass("transform");
                $(".question_App_left img").removeClass("transform");
			}else{
                recharge = "off";
                App = "off";
                $(".change_mobile").hide();
                $(".password").hide();
                $(".double_time").hide();
                $(".money_none").hide();
                recharge_height = $(".question_recharge").height() - 1;
                $(".question_recharge_left").css({"height": recharge_height});
                App_height = $(".question_App").height() - 1;
                $(".question_App_left").css({"height": App_height});
                $(".question_App_left img").removeClass("transform");
                $(".question_recharge_left img").removeClass("transform");
			}
        })
	})
</script>
@endsection